<!-- 编辑页面 -->
<template>
  <div>
            <!-- 被拖拽区域 -->
        <div id="dragArea">
          <div class="dragItem" draggable="true" @dragstart="dragStart($event)" data-type="headernav">导航</div>
          <div class="dragItem" draggable="true" @dragstart="dragStart($event)" data-type="slider">轮播图</div>
          <div class="dragItem" draggable="true" @dragstart="dragStart($event)" data-type="myheader">页头</div>
          <div class="dragItem" draggable="true" @dragstart="dragStart($event)" data-type="service">业务推荐</div>
          <div class="dragItem" draggable="true" @dragstart="dragStart($event)" data-type="aboutus">关于我们</div>
          <div class="dragItem" draggable="true" @dragstart="dragStart($event)" data-type="articleList">文章列表</div>
          <div class="dragItem" draggable="true" @dragstart="dragStart($event)" data-type="message">留言列表</div>
          <div class="dragItem" @click="mxSave">保存</div>

        </div>
              <!-- 被放置区域,设置dragenter事件代替dragover但是不理想 -->
        <div  @drop="droped($event)" @dragover='allowDrop($event)' @dragleave='leaveElement($event)'>
            <!-- 被放置的元素可以拖动排序,依赖Vue-Draggable -->
        <draggable id="dropArea" v-model="elements" :options="{group:'people'}" @update="datadragEnd($event)">
            <!-- 动态输出元素组件 -->
            <div class="oneDomElement" v-for="(element,index) in elements" :is="element" :datas="elementData[index]" :key="index" :data-index="index">
                 <!-- 删除按钮 -->
                <span class="delectNav" @click="delectElement(index)">X</span>
                <!-- 编辑按钮 -->
                <span class="editElement" @click="editElement(index)">编辑</span>
            </div>
        </draggable>
        </div>
        <!-- 编辑元素对话框 -->
        <el-dialog
        title="编辑"
        :visible.sync="editElementDialog"
        width="70%">
        <div>
            <!-- 编辑的是导航栏时的表格数据 -->
            <!-- 当编辑的是导航和轮播图时,使用表格渲染 -->
            <el-table :data="elementData[nowEditIndex]" style="width:100%" v-if="nowEditType=='headernav'||nowEditType == 'slider'">
                <!-- 当类型是导航栏时显示该列 -->
                <el-table-column label="标题" v-if="nowEditType=='headernav'">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.title"></el-input>
                    </template>
                </el-table-column>
                <!-- 当类型是轮播图时显示该列 -->
                <el-table-column label="图片地址" v-if="nowEditType == 'slider'">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.src"></el-input>
                    </template>
                </el-table-column>
                <!-- 当类型是导航栏，轮播图时显示该列 -->
                <el-table-column label="链接" v-if="nowEditType=='headernav'||nowEditType == 'slider'">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.href"></el-input>
                    </template>
                </el-table-column>
                <!-- 当类型是导航栏时显示该列 -->
                <el-table-column label="新窗口" v-if="nowEditType=='headernav'">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.newWindow"></el-switch>
                    </template>
                </el-table-column>
                <!-- 当类型是导航栏时显示该列 -->
                <el-table-column label="操作" v-if="nowEditType=='headernav'||nowEditType == 'slider'">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="delectElementData(nowEditIndex,scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 当编辑的是页头,业务推荐,关于我们,文章列表时 -->
            <el-form ref="form" :model="elementData[nowEditIndex]" v-if="nowEditType=='myheader'||nowEditType == 'service'||nowEditType == 'aboutus'||nowEditType == 'articleList'">
              <!-- 加入编辑页头模块 -->
              <span v-if="nowEditType=='myheader'">
                <el-form-item label="Logo图片">
                  <el-input v-model="elementData[nowEditIndex].img"></el-input>
                </el-form-item>
                <el-form-item label="客服电话">
                  <el-input v-model="elementData[nowEditIndex].phoneNum"></el-input>
                </el-form-item>
                <el-form-item label="客服时间">
                  <el-input v-model="elementData[nowEditIndex].time"></el-input>
                </el-form-item>
              </span>
              <!-- 加入编辑的是业务推荐模块 -->
              <span v-if="nowEditType=='service'">
                <el-form-item label="标题">
                  <el-input v-model="elementData[nowEditIndex].title"></el-input>
                </el-form-item>
                <el-form-item label="列表内容">
                  <div v-for="(item,index) in elementData[nowEditIndex].list">
                    <br>
                  图片地址:<el-input style="width:200px;" v-model="item.img"></el-input>
                  显示文字:<el-input style="width:200px;" v-model="item.text"></el-input>
                  模块链接:<el-input style="width:200px;" v-model="item.href"></el-input>
                  </div>
                </el-form-item>
              </span>
              <!-- 加入添加的是简介模块 -->
              <span v-if="nowEditType=='aboutus'">
                <el-form-item label="标题">
                  <el-input v-model="elementData[nowEditIndex].title"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                  <el-input v-model="elementData[nowEditIndex].img"></el-input>
                </el-form-item>                
                <el-form-item label="公司名">
                  <el-input v-model="elementData[nowEditIndex].name"></el-input>
                </el-form-item>                
                <el-form-item label="公司介绍">
                  <el-input v-model="elementData[nowEditIndex].intro"></el-input>
                </el-form-item>
              </span>
              <!-- 假如添加的是文章列表模块 -->
              <span  v-if="nowEditType=='articleList'">
                <el-form-item label="文章排序">
                  <el-radio-group v-model="elementData[nowEditIndex].type">
                    <el-radio label="primary">默认</el-radio>
                    <el-radio label="hot">热门</el-radio>
                    <el-radio label="time">发布时间</el-radio>
                  </el-radio-group>
                </el-form-item>
              </span>
            </el-form>
            <!-- 向该元素数据中新加入一项 -->
            <el-button v-if="nowEditType=='headernav'||nowEditType == 'slider'" @click="addElementData(nowEditIndex,nowEditType)">添加项</el-button>
        </div>
        <!-- 弹出框页脚按钮 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="editElementDialog = false">取 消</el-button>
            <el-button type="primary" @click="editElementDialog = false">确 定</el-button>
          </span>
        </el-dialog>
  </div>
</template>
<script>
let domtype = ""; //临时变量保存元素类型
let dom = ""; //保存当前拖拽对象所在哪个元素
let index = ""; //保存当前拖拽对象所在元素
import mycomponents from "@/components/exportComponents.js"; //引入所依赖的组件
export default {
  data() {
    return {
      //编辑对话框是否启用
      editElementDialog: false,
      //可进行拖拽的类型按钮
      elementBtnGroup: ["导航"],
      //放置的元素组合
      elements: [],
      //根据索引保存的数据
      elementData: [],
      // 正在编辑中的索引
      nowEditIndex: 0,
      // 正在编辑中的元素类型
      nowEditType: ""
    };
  },

  components: mycomponents.components, //注册所需要的组件

  computed: {},

  mounted: function() {},

  methods: {
    //拖拽开始时时间
    dragStart(event) {
      domtype = event.target.dataset.type;
    },
    dragend(e) {},
    //放置区域被放置东西时
    droped(e) {
      this.getElementTemplate(index);
      if (dom != "") dom.style.borderTop = "none";
    },
    //拖动到某元素上
    allowDrop(e) {
      var className = "";
      for (var i = 0, len = e.path.length; i < len; i++) {
        className = e.path[i].className;
        if (className == undefined) continue;
        if (className.match("oneDomElement")) {
          e.path[i].style.borderTop = "2px solid red";
          index = e.path[i].getAttribute("data-index");
          dom = e.path[i];
        }
      }
      e.preventDefault(); //阻止默认事件发生
    },
    //离开某元素范围
    leaveElement(e) {
      var className = "";
      for (var i = 0, len = e.path.length; i < len; i++) {
        className = e.path[i].className;
        if (className == undefined) continue;
        if (className.match("oneDomElement")) {
          e.path[i].style.borderTop = "none";
          dom = "";
          index = "";
        }
      }
      e.preventDefault();
    },
    //   拖拽排序结束时,更新相应索引中的数据
    datadragEnd(evt) {
      //  获取被拖拽元素的旧索引和新索引
      let oldIndex = evt.oldIndex;
      let newIndex = evt.newIndex;
      let temp = this.elementData[oldIndex];
      this.elementData.splice(oldIndex, 1);
      this.elementData.splice(newIndex, 0, temp);
    },
    //获取元素对应模板
    getElementTemplate(index) {
      if (index == "") {
        index = this.elements.length;
      }
      switch (domtype) {
        //   如果添加的是一个导航元素
        case "headernav":
          this.elements.splice(index, 0, "headernav");
          this.elementData.splice(index, 0, [
            { title: "关于我们", href: "#", newWindow: false },
            { title: "产品服务", href: "#", newWindow: false },
            { title: "新闻动态", href: "#", newWindow: false }
          ]);
          break;
        //   如果添加的是一个轮播图
        case "slider":
          this.elements.splice(index, 0, "slider");
          this.elementData.splice(index, 0, [
            {
              src:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532168088&di=e31e243fa9f037ef001c464069994b51&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0121bb5608950d32f875a132611ce7.jpg%401280w_1l_2o_100sh.jpg",
              href: "#"
            }
          ]);
          break;
        case "myheader":
          this.elements.splice(index, 0, "myheader");
          this.elementData.splice(index, 0, {
            img: "http://www.zhengbang.com.cn/builder/edm/images/z-pclogo5.png",
            phoneNum: "18439355828",
            time: "9:00-17:00,法定节假日除外"
          });
          break;
        case "service":
          this.elements.splice(index, 0, "service");
          this.elementData.splice(index, 0, {
            title: "业务推荐/Service",
            list: [
              { img: "", text: "理财增值", href: "" },
              { img: "", text: "投资业务", href: "" },
              { img: "", text: "个人服务", href: "" },
              { img: "", text: "信托服务", href: "" }
            ]
          });
          break;
        case "aboutus":
          this.elements.splice(index, 0, "aboutus");
          this.elementData.splice(index, 0, {
            title: "公司简介/About us",
            img: "http://gc.zbj.com/upimg/6/2015/0814/20150814121348_54693.jpg",
            name: "某某金融",
            intro:
              "北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？"
          });
          break;
        case "articleList":
          this.elements.splice(index, 0, "articleList");
          this.elementData.splice(index, 0, {
            type: "primary"
          });
          break;
        case "message":
          this.elements.splice(index, 0, "message");
          this.elementData.splice(index, 0, {});
          break;
      }
      //重置domtype,防止排序时冲突添加元素
      domtype = "";
    },
    //当删除按钮被点击
    delectElement(index) {
      this.nowEditType = "";
      this.elements.splice(index, 1);
      this.elementData.splice(index, 1);
    },
    //当编辑按钮被点击
    editElement(index) {
      this.nowEditIndex = index;
      this.nowEditType = this.elements[index];
      this.editElementDialog = true;
    },
    //   当编辑页面添加项按钮被点击
    addElementData(index, type) {
      switch (type) {
        case "headernav":
          this.elementData[index].push({
            title: "默认文字",
            href: "#",
            newWindow: false
          });
          break;
        case "slider":
          this.elementData[index].push({
            src: "",
            href: "#"
          });
          break;
      }
    },
    // 删除某个元素
    delectElementData(index, dataindex) {
      this.elementData[index].splice(dataindex, 1);
    },
    mxSave() {
      var html = document.getElementById("dropArea").innerHTML;
      html = html.replace(/>X</g, "><");
      html = html.replace(/>编辑</g, "><");
      html = html.replace(/\sdata\-v\-\w{8}\=\"\"/g, "");
      console.log(html);
    }
  }
};
</script>
<style scoped>
/* 拖拽区域 */
#dragArea {
  width: 15%;
  position: fixed;
  height: 100%;
  border: 1px solid #eee;
  box-shadow: 1px 1px 2px 2px #eee;
  left: 0;
  top: 0;
}
/* 放置区域 */
#dropArea {
  width: 80%;
  position: fixed;
  height: 100%;
  border: 1px solid #eee;
  box-shadow: -1px -1px 2px 2px #eee;
  right: 0;
  top: 0;
  overflow-y: scroll;
}
/* 拖拽按钮样式 */
.dragItem {
  width: 70px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: inline-block;
  margin: 10px 20px;
  color: #666;
}
/* 拖拽按钮获取焦点时样式 */
.dragItem:hover {
  background: #4455ef;
  color: white;
}
/* 删除一个元素 */
.delectNav {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: white;
  background: #999;
  border: 1px solid white;
  visibility: hidden;
}
/* 添加的一个元素 */
.oneDomElement {
  position: relative;
}
/* 当获取焦点时显示删除按钮 */
.oneDomElement:hover .delectNav {
  visibility: visible;
}
/* 删除按钮 */
.delectNav:hover {
  background: red;
  color: white;
}
/* 编辑按钮 */
.editElement {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 30px;
  visibility: hidden;
  color: white;
  background: #999;
}
/* 显示编辑按钮 */
.oneDomElement:hover .editElement {
  visibility: visible;
}
/* 编辑按钮活动 */
.editElement:hover {
  background: red;
  color: white;
}
</style>